<template>
  <div class="module_">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='80px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="方案名称">
            <el-input size="medium" clearable v-model="editForm.phone" placeholder="请输入名称搜索" />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button size="medium" type="primary" @click="handle({arr:[]},1)">添加</el-button>
        </template>
      </search>
    </div>
    <el-table :data="tableData" class="flex-1" height="100%" size="medium" border highlight-current-row
      v-loading="tableLoading" stripe @sort-change="tableSortChange">
      <el-table-column align="center" show-overflow-tooltip prop="name" label="方案名称" width="300" sortable="custom">
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="zj" label="评审方案" width="550" sortable="custom">
        <template>
          <span class="shou">评分表单 <i class="el-icon-document"></i> </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <div class="flex-justify-end" slot-scope="scope">
          <el-tooltip effect="dark" content="修改信息" placement="bottom-end">
            <el-button size="small" @click="handle(scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="bottom-end">
            <el-button size="small" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog :visible.sync="editFormVisible" width="700px" :close-on-click-modal='false'
      :close-on-press-escape='false'>
      <el-form autocomplete="off" label-width="90px">
        <el-form-item label="方案名称" class="tip">
          <el-input size="medium" clearable v-model="editForm.name" placeholder="请选择人员" />
        </el-form-item>
      </el-form>
      <div>
        <div class="tx-r">
          <el-button type="text" size="mini" @click="append">添加单选</el-button>
          <el-button type="text" size="mini" @click="append">添加多选</el-button>
        </div>
        <div>
          <div class="mb16">
            <p class="f-16 fb mb8 flex-justify-bcenter"> <span>题目一（单选）</span> <i class="el-icon-close"></i> </p>
              <el-radio-group  class="pl8">
                <el-radio :label="3">备选项1</el-radio>
                <el-radio :label="6">备选项2</el-radio>
                <el-radio :label="9">备选项3</el-radio>
              </el-radio-group>
          </div>
          <div>
            <p class="f-16 fb mb8 flex-justify-bcenter"> <span>题目二（多选）</span> <i class="el-icon-close"></i> </p>
              <el-checkbox-group v-model="checkList" class="pl8">
                <el-checkbox label="选项1"></el-checkbox>
                <el-checkbox label="选项2"></el-checkbox>
                <el-checkbox label="选项3"></el-checkbox>
              </el-checkbox-group>
          </div>
        </div>
      </div>
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="editFormVisible2" width="700px" :close-on-click-modal='false'
      :close-on-press-escape='false'>
      <h2 slot="title" class="tx-c">单选方案</h2>
      <el-form autocomplete="off" label-width="60px">
        <el-form-item label="题目" class="tip">
          <el-input size="medium" v-model="value" clearable placeholder="请输入题目" />
        </el-form-item>
        <el-form-item label="选项" class="tip">
          <div>
            <p><el-tag closable :disable-transitions="false" effect="plain">选项一 ......</el-tag></p>
            <p><el-tag closable :disable-transitions="false" effect="plain">选项二 ......</el-tag></p>
            <p><el-tag closable :disable-transitions="false" effect="plain">选项三 ......</el-tag></p>
            <p>
              <el-input v-if="inputVisible"  ref="saveTagInput"> </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">增加选项</el-button></p>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible2 = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核 -->
    <examine ref="examine" @submit='(options)=>examineSubmit(options,1)' />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        checkList:[],
        inputVisible: false,
        tableData: [{
          name: '方案一',
        }, {
          name: '方案二',
        }],
        editFormVisible: false,
        editFormVisible2: false,
        editForm: {}, //修改或者查看详情

        pageparm: {
          page: 1,
          perPage: 20,
          total: null,
          sort_str: null,
          sort_order: 'desc',
        },
        tableLoading: false,

        btnLoading: false,

        dialogTitle: '',
        options: [{
            label: '张三',
            value: 1
          },
          {
            label: '李四',
            value: 2
          },
          {
            label: '王五',
            value: 3
          },
          {
            label: '甲',
            value: 4
          },
        ]

      }
    },
    mounted() {},
    methods: {
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      append() {
        this.editFormVisible2 = true
      },
      handle(item, i) {
        this.editForm = {
          ...item
        }
        this.editFormVisible = true
      },
      examineSubmit() {

      },
      examine_btns(item, i) {
        this.$refs.examine.examineShow = true
      },
      tableSortChange(column) {
        if (column.order === "descending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "desc";
        } else if (column.order === "ascending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "asc";
        } else {
          this.pageparm.sort_str = null;
          this.pageparm.sort_order = null;
        }
        this.getList()
      },
      //搜索
      clearSearch() {
        // this.$refs.search_d.clear()
      },
      searchChane(i, val) {
        this.pageparm[val] = i
        this.pageparm.page = 1
        this.getList()
      },
      //分页
      callFather(pageparm) {
        this.pageparm.page = pageparm.page
        this.pageparm.perPage = pageparm.perPage
        this.getList()
      },
      getList() {
        this.tableLoading = true
        Apievaluatetask(this.pageparm).then(({
          data,
          page
        }) => {
          this.tableData = data || []
          this.pageparm.total = page.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      submit() {

      }
    },

  }
</script>